<template>
  <div class="edu-page-warp">
    <div class="edu-opertion-bar">
      <div class="float-right">
        <el-button type="text" @click="backToMain">{{ $t('score.goback') }}</el-button>
      </div>
    </div>
    <div class="previewPanel">
      <h3 class="float-left" v-if="isShow">{{ $t('score.studentScorePrint.chineseTranscriptPreview') }}</h3>
      <el-button
        v-if="isShow"
        class="float-right"
        @click="chineseTranscriptExport">{{ $t('common.btn.export') }}</el-button>
        <el-button style="float: right; margin: 0 10px 0 0;" v-print="printObj" type="primary">打印</el-button>
    </div>
    <div class="previewPage" id="printMe" v-for="(item,index) in tableList" :key="index">
      <div class="previewPageInner">
        <div class="previewPageTitle">本科生{{ item.advancedLevelName }}成绩单</div>
        <div class="tableStyle">
            <table class="topTable">
                <tr>
                    <td  rowspan="4" style="min-width:100px"></td>
                    <td>姓名:{{ item.studentName }}</td>
                    <td>学号:{{ item.studentId }}</td>
                    <td>性别:{{ item.sexI18n }}</td>
                    <td>出生日期:{{ item.birth }}</td>
                </tr>
                <tr>
                    <td>学院:{{ item.facultyI18n }}</td>
                    <td colspan="3" scope="col">专业:{{ item.professionI18n }}</td>
                </tr>
                <tr>
                    <td>辅修行政学院:{{ item.minorFacultyI18n }}</td>
                    <td colspan="3" scope="col">{{ item.advancedLevelName }}:{{ item.minorProfessionI18n }}</td>
                </tr>
                <tr>
                    <td>辅修入学时间:{{ item.entranceTerm }}</td>
                    <td colspan="3" scope="col">辅修学制:{{ item.minorLengthOfSchool }}</td>
                </tr>
            </table>
        </div>
        <div class="middleDiv">
            <div style="width:50%;margin-right:10px;">
                <table class="middleTable" cellSpacing="0">
                    <tr>
                        <td style="min-width:40%;font-weight:bold; border-bottom:2px solid black">课程名</td>
                        <td style="min-width:10%;font-weight:bold; border-bottom:2px solid black">学分</td>
                        <td style="min-width:10%;font-weight:bold; border-bottom:2px solid black">成绩</td>
                        <td style="min-width:40%;font-weight:bold; border-bottom:2px solid black">学期</td>
                    </tr>
                    <tr v-for="(item1, index1) in isOdd(item.scoreDetailList)"
                        :key="index1">
                        <td :class="item1.isBolden ? 'isBolden': ''">{{ item1.courseName }}</td>
                        <td>{{ item1.credit }}</td>
                        <td>{{ item1.scoreValue }}</td>
                        <td>{{ item1.calendarYearTermCn }}</td>
                    </tr>
                </table>
            </div>
            <div style="width:50%;margin-right:10px;">
                <table class="middleTable" cellSpacing="0" >
                    <tr>
                        <td style="min-width:40%;font-weight:bold; border-bottom:2px solid black">课程名</td>
                        <td style="min-width:10%;font-weight:bold; border-bottom:2px solid black">学分</td>
                        <td style="min-width:10%;font-weight:bold; border-bottom:2px solid black">成绩</td>
                        <td style="min-width:40%;font-weight:bold; border-bottom:2px solid black">学期</td>
                    </tr>
                    <tr v-for="(item,index) in isEven(item.scoreDetailList)"
                        :key="index">
                        <td :class="item.isBolden ? 'isBolden': ''">{{ item.courseName }}</td>
                        <td>{{ item.credit }}</td>
                        <td>{{ item.scoreValue }}</td>
                        <td>{{ item.calendarYearTermCn }}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="tableStyle borderBottom2">
          <table class="bottomTable">
            <tr>
                <td>修读学分:{{ item.creditAll }}</td>
                <td>实修学分:{{ item.creditPassed}}</td>
                <td>平均绩点:{{ item.averagePoint}}</td>
                <td>相当于百分制成绩:{{ item.hundredPointScore }}</td>
            </tr>
          </table>
        </div>
        <div class="divStyle">
            <div style="width:24%;float:right;">
                <p>同济大学本科生院</p>
                <p>打印日期：{{ item.printDate }}</p>
            </div>
            <div style="width:38%;float:right;">
                <label>主管院长:</label>
                <span>{{ item.faucltyManager }}</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
export default {
    name: 'preview-english-score-blanket',
    props:{
        chineseScoremessage:{
            default:{},
        }
    },
    data() {
        return {
            printObj: {
                id: '#printMe',
                popTitle: '',
                extraHead:
                    '<meta http-equiv="Content-Language"content="zh-cn"/>,<style>  #printMe { width: 100%; !important; } <style>',
                extraCss: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
            },
            studentInfo: {},
            scoreList: [],
            chineseScoremessage: this.chineseScoremessage,
            tableList: [],
            isShow: true
        };
    },
    mounted() {
        this.initPreviewPage();
    },
    methods: {
        async initPreviewPage() {
            let param = {
                studentId: this.chineseScoremessage.studentId,
                minorFaculty: this.chineseScoremessage.minorFaculty,
                minorProfession: this.chineseScoremessage.minorProfession,
                language: 'cn',
                advancedLevel: this.chineseScoremessage.advancedLevelCode
            };
            try{
                let tableDatas = await scoreManagementApi.getScorePreview(param);
                if(tableDatas.code === 200) {
                    this.tableList = tableDatas.data
                }
            } catch (err) {
                this.isShow = false;
            }
        },
        // 学生成绩导出
        chineseTranscriptExport() {
            let param = {
                studentId: this.chineseScoremessage.studentId,
                minorFaculty: this.chineseScoremessage.minorFaculty,
                minorProfession: this.chineseScoremessage.minorProfession,
                language: 'cn',
                advancedLevel: this.chineseScoremessage.advancedLevelCode
            };
            scoreManagementApi.exportMinorStudentScorePrint(param);
        },
        backToMain() {
           this.$emit('back')
        },
        isEven(list) {
            return list.filter((val, item) =>{
                return item % 2 == 0
            })
        },
        isOdd(list){
            return list.filter((val, item) =>{
                return item % 2 != 0
            })
        }
    }
};
</script>
<style scoped>
.previewPanel {
    width: 800px;
    margin: 10px auto;
    height: 32px;
}
.previewPage {
    clear: both;
    width: 800px;
    margin: 0 auto 30px;
    background: #fff;
}
.float-right {
    float: right;
}
.float-left {
    float: left;
    margin-bottom: 0;
    line-height: 30px;
}
.previewPageInner {
    width: 90%;
    clear: both;
    margin: 0 auto;
    height: 90%;
    padding: 30px 0;
}
.previewPageTitle {
    text-align: center;
    padding-right: 30px;
    width: 100%;
    height: 70px;
    line-height: 90px;
    font-size: 24px;
    /* border-bottom: 2px solid #ccc; */
    font-family: "黑体";
}
.tableStyle {
    width: 100%;
    padding: 4px 0;
}
.boderBottom {
    border-bottom: 1px solid #ccc;
}
.borderBottom2 {
    border-bottom: 2px solid #aaa;
    border-top: 1px solid #ccc;
}
.middleDiv {
    width: 100%;
    padding: 0 0 40px;
    display: flex;
    min-height: 450px;
}
.divStyle {
    width: 100%;
    padding-top: 20px;
    height: 50px;
    font-family: "黑体";
}
.topTable,
.bottomTable {
    width: 100%;
}
.topTable{
  height: 30px;
  line-height: 30px;
}
/* .topTable tr td:nth-of-type(odd) {
    font-family: "黑体";
    font-weight: bold;
}

.topTable tr td:nth-of-type(even) {
    font-family: "宋体";
} */
.bottomTable tr td {
    font-weight: bold;
}
.bottomTable tr td:last-of-type {
    font-weight: normal;
}
/* .bottomTable tr td:nth-of-type(odd) {
    font-family: "黑体";
    font-weight: bold;
}
.bottomTable tr td:nth-of-type(1) {
    width: 80px;
}
.bottomTable tr td:nth-of-type(3) {
    width: 80px;
}
.bottomTable tr td:nth-of-type(5) {
    width: 110px;
}
.bottomTable tr td:nth-of-type(even) {
    font-family: "黑体";
}
.bottomTable tr td:last-of-type {
    font-weight: normal;
} */
.middleTable {
    width: 100%;
}
.middleTable tr {
    height: 18px;
    line-height: 18px;
}
.divStyle p {
    margin: 2px 0;
    text-align: center;
}
.previewPanel p {
    margin: 2px 0;
}
.isBolden {
    font-weight: bold;
}
</style>
